<template>
  <el-container class="subAccount">
    <el-header>
      <div class="establish" @click="add('add')">＋创建子账户</div>
    </el-header>
    <el-footer>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="子用户名称" prop="username"> </el-table-column>
        <el-table-column prop="password" label="密码">*******</el-table-column>
        <el-table-column prop="createTime" label="时间"></el-table-column>
        <el-table-column label="权限">
          <template slot-scope="scope">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">查看权限<i class="el-icon-arrow-down el-icon--right"></i> </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, i) in scope.row.menuPerm" :key="i">{{ item }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="removeChild(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="operationTitle" :default-checked-keys="userJurisdiction" :visible.sync="newlyincreased" width="30%" :before-close="consultClose">
        <el-form ref="formRef" :model="ruleForm" label-width="80px" :rules="rules">
          <el-form-item label="子用户名称" label-width="110px" v-if="operation == 'add'" prop="username">
            <el-input v-model="ruleForm.username" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="子用户名称" label-width="110px" v-else>
            <el-input v-model="ruleForm.username" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" label-width="110px">
            <el-input v-model="ruleForm.name" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="手机号" label-width="110px">
            <el-input v-model="ruleForm.phone" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="110px" v-if="operation == 'add'" prop="password">
            <el-input type="password" v-model="ruleForm.password" style="width:80%"> </el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="110px" v-else>
            <el-input type="password" v-model="ruleForm.password" style="width:80%"> </el-input>
          </el-form-item>
          <el-form-item label="权限" label-width="110px">
            <el-tree :data="permissionData" show-checkbox node-key="menuId" ref="tree" highlight-current :props="defaultProps"> </el-tree>
          </el-form-item>
          <el-form-item label="备注" label-width="110px">
            <el-input v-model="ruleForm.remarks" style="width:80%"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="operation == 'add'" @click="immediatelyAdd">立即添加</el-button>
            <el-button type="primary" v-else @click="nowecompose">立即修改</el-button>
            <el-button @click="consultClose">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-footer>
  </el-container>
</template>
<script>
import { getSubAccountManage, getJurisdiction, addChild, amendChild, removeChild } from '@/views/userHome/api/subAccount.js'
import { getItem } from '@/utils/store.js'
export default {
  data() {
    return {
      isadd: true,
      ruleForm: {},
      permissionData: [],
      userJurisdiction: [],
      operation: '',
      operationTitle: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      id: {
        userId: ''
      },
      newlyincreased: false,
      tableData: [
      ],
      rules: {
        username: [
          { required: true, message: '请输入您的姓名', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        menuPerm: [{ required: true, message: '请输入您的姓名', trigger: 'blur' }],
        menuIdList: [{ required: true, message: '请选择权限', trigger: 'chenage' }]
      }
    }
  },
  created() {
    this.getSubAccountManages()
    this.getJurisdictionMenu()
  },
  methods: {
    handleClick(item) {
      // 编辑
      this.operation = 'recompose'
      this.newlyincreased = true
      if (this.operation == 'recompose') {
        this.operationTitle = '修改子用户信息'
        this.ruleForm = {...item}
        for (const k in item.menuPerm) {
          this.userJurisdiction.push(k)
        }
      }
    },
    async nowecompose() {
      // 立即修改
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          this.ruleForm.userId = getItem('XIE_XIN').user_id
          const { data: res } = await amendChild(this.ruleForm)
          if (res.code == 0) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.newlyincreased=false
            this.getSubAccountManages()
          } else {
            this.$message({
              type: 'warning',
              offset: 200,
              message: res.msg
            })
          }
        } else {
          this.$message({
            type: 'warning',
            offset: 200,
            message: '请按照规则填写信息'
          })
        }
      })
    },
    async removeChild(row) {
      //删除子用户
      let id = row.userId
      const { data: res } = await removeChild(id)
      console.log(res)
      if (res.code == 0) {
        this.$message({
          message: '删除子用户成功',
          type: 'success'
        })
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: '删除子账户失败'
        })
      }
      this.getSubAccountManages()
    },
    async getJurisdictionMenu() {
      //获取用户菜单
      const { data: res } = await getJurisdiction()
      if (res.code == 0) {
        this.permissionData = res.data
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: res.msg
        })
      }
    },
    async getSubAccountManages() {
      //获取用户信息
      let params ={
        userId:getItem('XIE_XIN').user_id
      } 
      const { data: res } = await getSubAccountManage(params)
      console.log(res)
      if (res.code == 0) {
        this.tableData = res.data
      } else {
        this.$message({
          type: 'warning',
          offset: 200,
          message: '获取子账户信息失败'
        })
      }
    },
    add() {
      //打开新增子账户
      this.operation = 'add'
      this.newlyincreased = true
      this.operationTitle = '新增子用户'
      this.userJurisdiction - []
    },
    async immediatelyAdd() {
      //添加子账户
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          let companyId = getItem('USER_INFO').data.data.companyId
          let parentId = getItem('XIE_XIN').user_id
          let menuIdList = this.$refs.tree.getCheckedKeys()
          this.ruleForm.defaultCompanyId = companyId
          this.ruleForm.parentId = parentId
          this.ruleForm.menuIdList = menuIdList
          console.log(this.ruleForm)
          const { data: res } = await addChild(this.ruleForm)
          if (res.code == 0) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.ruleForm = {}
            this.newlyincreased = false
            this.getSubAccountManages()
          } else {
            this.$message({
              message: res.msg,
              type: 'warning'
            })
          }
        } else {
          this.$message({
            message: '请按照规则填写信息',
            type: 'warning'
          })
        }
      })
    },
    consultClose() {
      //添加的form隐藏
      this.ruleForm = {}
      this.newlyincreased = false
    }
  }
}
</script>
<style lang="less" scoped>
.subAccount {
  margin-top: 40px;
  .establish {
    width: 118px;
    height: 40px;
    background-color: rgb(24, 144, 255);
    cursor: pointer;
    color: #fff;
    text-align: center;
    line-height: 40px;
  }
  .has-gutter {
    .cell {
      color: #000;
    }
  }
}
</style>
